<!-- 我发布的任务 -->
<!-- 使用：my/myTask -->
<template>
	<view class="">
		<!-- 空为了解决高度塌陷 -->
		<view class="empty_box"></view>
		<view class="release_task">
			<view class="release_task_header">
				<view :class="">
					{{dataItem.taskName}}
				</view>
				<view :class="[dataItem.status == '4' ? 'uncomplete' : 'completed']">
					{{handleTaskStatus}}
				</view>
			</view>
			<view class="release_task_body">
				<view class="release_task_body_left">
					<view class="taskName">{{ dataItem.description }}</view>
					<view class="task_detail_secondary_time">
						起止日期 {{ handleTime }}
					</view>
				</view>
				<view class="release_task_body_right">
					<view class="" style="color: var(--echo-main-color);">{{dataItem.incentiveAmount}}</view>
					<view class="unit">{{ dataItem.ccy === ccy ?  ccyName : '原力'}}</view>
					<u-button :plain="true" text="提交" color="var(--echo-main-color)" class="toCreate" @tap="complete(dataItem.serialNo)" size="small"
						v-if="dataItem.status == 2">
					</u-button>
					<view class="" v-else></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ccy: '',
				ccyName: ''
			};
		},
		props: {
			dataItem: {
				type: Object
			}
		},
		created() {
			this.ccy = getApp().globalData.ccy
			this.ccyName = getApp().globalData.ccyName
			// 找到开始时间空格位置
			var startIndex = this?.dataItem?.startTime?.indexOf(" ");
			// 截取到开始时间
			this.startTime = this?.dataItem?.startTime?.slice('', startIndex);
			// 找到结束时间空格位置
			var endIndex = this?.dataItem?.endTime?.indexOf(" ");
			// 截取到结束时间
			this.endTime = this?.dataItem?.endTime?.slice('', endIndex);
		},
		computed: {
			handleTime() {

				var startIndex = this?.dataItem?.startTime?.indexOf(" ");
				// 截取到开始时间
				var startTime = this?.dataItem?.startTime?.slice('', startIndex);
				// 找到结束时间空格位置
				var endIndex = this?.dataItem?.endTime?.indexOf(" ");
				// 截取到结束时间
				var endTime = this?.dataItem?.endTime?.slice('', endIndex);

				return `${startTime} 至 ${endTime}`
			},
			handleTaskStatus() {
				// console.log('dataItem.status', this.dataItem.status)
				switch (this.dataItem.status) {
					case 0:
						return '未发布';
					case 1:
						return '已发布';
					case 2:
						return '已领取';
					case 3:
						return '已提交';
					case 4:
						return '已完成';
					case 5:
						return '已过期';
				}
			}
		},
		methods: {
			complete(serialNo) {
				this.$emit("complete", serialNo)
			}
		}
	}
</script>

<style lang="scss">
	.empty_box {
		height: 1rpx;
	}

	.release_task {
		width: 90%;
		margin: 0 auto;
		border-radius: 10rpx;
		height: 280rpx;
		overflow: hidden;
		margin-top: 20rpx;
		padding-bottom: 20rpx;

		&_header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: $echo-font-size-conent;
			margin-bottom: 4rpx;
			background-color: #fff;
			height: 30%;
			padding: 0 30rpx;

			.uncomplete {
				color: $echo-main-color;
				font-size: 28rpx;
			}

			.completed {
				color: $echo-main-color;
				font-size: 28rpx;
			}
		}

		&_body {
			display: flex;
			justify-content: space-between;
			background-color: #fff;
			height: 70%;
			padding: 30rpx 30rpx;

			.task_detail_secondary_time{
				font-size: $echo-font-size-conent;
				color: #777;
				margin-bottom: 30rpx;
				margin-top:12rpx;
			}
			&_left {
				width: 80%;

				.taskName {
					font-size: $echo-font-size-title;
					min-height: 100rpx;
					color: #777;
					font-size: 14px;
					overflow: hidden;
					text-overflow: ellipsis;
					word-wrap: normal;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				.endTime {
					color: #bdbdbd;
					margin: 10rpx 0;
				}
			}

			&_right {
				width: 20%;
				color: red;
				font-size: 28rpx;
				text-align: center;
				padding-top: 10rpx;
				.unit {
					font-size: 24rpx;
					color: #bdbdbd;
				}

				// 操作按钮
				.toCreate {
					margin-top: 10rpx;
				}
			}
		}
	}
</style>
